<template>
  <div style="display: inline-block;">
    <el-button type="primary" icon="el-icon-edit" circle title="编辑" class="buttoncss" @click="dialogTableVisible = true"/>
    <!--<el-button type="danger" @click="dialogTableVisible = true">修改</el-button>-->
    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" width="600px" title="修改" @close="close">
      <el-form ref="row_data" :model="row_data" :rules="rules" label-position="left" label-width="100px" style="width: 450px; margin-left:50px;">
        <el-form-item :label="'id'" prop="id">
          <el-input v-model="row_data.id" placeholder="id" disabled/>
        </el-form-item>
        <el-form-item :label="'类名'" prop="class_name">
          <el-input v-model="row_data.class_name" placeholder="类名"/>
        </el-form-item>
        <el-form-item :label="'排序值'" prop="sort">
          <el-input v-model="row_data.sort" placeholder="排序值"/>
        </el-form-item>
        <el-form-item :label="'名称'" prop="content">
          <el-input v-model="row_data.nickname" placeholder="名称"/>
        </el-form-item>
        <el-form-item :label="'状态'" prop="status">
          <el-radio v-for="item in select_status" v-model="row_data.status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">立即创建</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import '@/styles/buttonStyle.css'
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { edit } from '@/api/article/category'
import store from '@/store'

export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Object,
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      select_status: [
        { value: 0, label: '禁用' },
        { value: 1, label: '正常' }
      ],
      rules: {
        id: [
          { required: true, message: 'id不能为空', trigger: 'blur' }
        ],
        class_name: [
          { required: true, message: '类名不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '排序值不能为空', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态值不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created: function() {
    // console.log(this.row_data.id)
  },
  methods: {
    submitForm() {
      var form_data = {
        id: this.row_data.id,
        class_name: this.row_data.class_name,
        sort: this.row_data.sort,
        nickname: this.row_data.nickname,
        status: this.row_data.status
      }
      edit(store.getters.token, form_data).then(res => {
        this.close()
      })
    },
    close() {
      this.$emit('getLists')
      this.dialogTableVisible = false
    }
  }
}
</script>
